<template>
	<view class="exchange-container">
		<!-- 商品图片展示 -->
		<view class="product-image-container" v-if="productUrl">
			<image class="product-image" :src="productUrl" mode="aspectFill"></image>
		</view>

		<view class="form-container">
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" v-model="formData.name" placeholder="请输入您的姓名" maxlength="20" />
			</view>

			<view class="form-item">
				<text class="label">电话</text>
				<input class="input" v-model="formData.phone" placeholder="请输入您的手机号码" type="number" maxlength="11" />
			</view>

			<view class="form-item">
				<text class="label">领取日期</text>
				<picker mode="date" :value="formData.date" @change="onDateChange">
					<view class="picker-input">
						<text class="picker-text">{{ formData.date || '请选择日期' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">领取时间段</text>
				<view class="option-container">
					<view class="option-item" :class="{ active: formData.option === 'option1' }"
						@click="selectOption('option1')">
						<view class="option-content">
							<text class="option-title">上午</text>
							<text class="option-desc">8:30-12:00</text>
							<text class="option-location">地点：下滘村委会</text>
						</view>
						<view class="option-radio" :class="{ checked: formData.option === 'option1' }"></view>
					</view>

					<view class="option-item" :class="{
						active: formData.option === 'option2',
						disabled: isWeekend
					}" @click="selectOption('option2')">
						<view class="option-content">
							<text class="option-title">下午</text>
							<text class="option-desc">14:30-17:30</text>
							<text class="option-location">地点：下滘读书驿站</text>
							<text class="weekend-tip" v-if="isWeekend">周末仅限上午</text>
						</view>
						<view class="option-radio" :class="{
							checked: formData.option === 'option2',
							disabled: isWeekend
						}"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-container">
			<button class="submit-btn" @click="submitForm" :disabled="!isFormValid">
				提交兑换申请
			</button>
		</view>
	</view>
</template>

<script>
import {
	request
} from "../../js/util.js";
export default {
	data() {
		return {
			formData: {
				name: '',
				phone: '',
				date: '',
				option: ''
			},
			productId: '',
			productUrl: ''
		}
	},
	onLoad(options) {
		console.log('options', options)
		// 获取页面参数
		if (options.id) {
			this.productId = options.id;
		}
		if (options.url) {
			this.productUrl = options.url;
		}
	},
	computed: {
		isWeekend() {
			if (!this.formData.date) return false;
			const date = new Date(this.formData.date);
			console.log('date:', date)
			const day = date.getDay();
			return day === 0 || day === 6; // 0是周日，6是周六
		},

		isFormValid() {
			return this.formData.name.trim() &&
				this.formData.phone.trim() &&
				this.formData.date.trim() &&
				this.formData.option.trim() &&
				this.validatePhone(this.formData.phone);
		}
	},
	methods: {
		onDateChange(e) {
			console.log('this.isWeekend', this.isWeekend)
			this.formData.date = e.detail.value;
			// 如果选择的是周末且当前选择的是下午，自动切换到上午
			if (this.isWeekend && this.formData.option === 'option2') {
				this.formData.option = 'option1';
				uni.showToast({
					title: '周末仅限上午时段',
					icon: 'none'
				});
			}
		},

		selectOption(option) {
			// 如果是周末且选择下午，则不允许选择
			if (this.isWeekend && option === 'option2') {
				uni.showToast({
					title: '周末仅限上午时段',
					icon: 'none'
				});
				return;
			}
			this.formData.option = option;
		},

		validatePhone(phone) {
			const phoneReg = /^1[3-9]\d{9}$/;
			return phoneReg.test(phone);
		},

		submitForm() {
			if (!this.isFormValid) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}

			// 显示确认对话框
			uni.showModal({
				title: '确认提交',
				content: '确认提交兑换申请吗？',
				success: (res) => {
					if (res.confirm) {
						this.handleSubmit();
					}
				}
			});
		},

		async handleSubmit() {
			// 准备提交数据，包含商品ID和URL
			let user_id = uni.getStorageSync('userid')
			const submitData = {
				...this.formData,
				item_id: this.productId,
				user_id
			};

			console.log('提交的兑换数据:', submitData);

			// 模拟提交过程
			uni.showLoading({
				title: '提交中...'
			});

			const data = await request("addRedemption", submitData);
			console.log("addRedemption", data)
			if (data.status) {
				uni.showToast({
					title: '兑换申请提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} else {
				uni.showToast({
					title: data.result.message || '兑换申请提交失败',
					icon: 'none'
				});
			}

		},

		resetForm() {
			this.formData = {
				name: '',
				phone: '',
				date: '',
				option: ''
			};
		}
	}
}
</script>

<style scoped>
.exchange-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.header {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.form-container {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.form-item {
	margin-bottom: 40rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	font-weight: 500;
}

.input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #fafafa;
	box-sizing: border-box;
}

.input:focus {
	border-color: #007aff;
	background-color: #fff;
}

/* 日期选择器样式 */
.picker-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #fafafa;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.picker-text {
	color: #333;
}

.picker-arrow {
	color: #999;
	font-size: 24rpx;
}

.textarea {
	width: 100%;
	min-height: 120rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	background-color: #fafafa;
	box-sizing: border-box;
	resize: none;
}

.textarea:focus {
	border-color: #007aff;
	background-color: #fff;
}

.submit-container {
	padding: 0 30rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #007aff, #0056cc);
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 44rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submit-btn:disabled {
	background: #ccc;
	color: #999;
}

.submit-btn:not(:disabled):active {
	opacity: 0.8;
}

/* 商品图片样式 */
.product-image-container {
	width: 100%;
	height: 400rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.product-image {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

/* 选项样式 */
.option-container {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.option-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 10rpx;
	background-color: #fafafa;
	transition: all 0.3s ease;
}

.option-item.active {
	border-color: #007aff;
	background-color: #f0f8ff;
}

.option-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.option-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.option-desc {
	font-size: 26rpx;
	color: #666;
}

.option-location {
	font-size: 26rpx;
	color: #007aff;
	font-weight: 500;
}

.option-radio {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ccc;
	border-radius: 50%;
	background-color: #fff;
	transition: all 0.3s ease;
}

.option-radio.checked {
	border-color: #007aff;
	background-color: #007aff;
	position: relative;
}

.option-radio.checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20rpx;
	height: 20rpx;
	background-color: #fff;
	border-radius: 50%;
}

/* 周末限制样式 */
.option-item.disabled {
	opacity: 0.5;
	background-color: #f5f5f5;
	border-color: #ddd;
}

.option-item.disabled .option-title,
.option-item.disabled .option-desc {
	color: #999;
}

.weekend-tip {
	font-size: 22rpx;
	color: #ff6b35;
	margin-top: 5rpx;
}

.option-radio.disabled {
	border-color: #ddd;
	background-color: #f5f5f5;
}
</style>